import React,{useState} from 'react'
import "./index.css"
export default function Item({ todo, done }) {

  // 鼠标悬浮特效可以使用高亮来实现
  //1.在index.css中书写样式,给li定义一个active属性
  // 2.随着鼠标的移入移出,这个属性随之发生改变,从而实现悬浮效果
  // 3.在state中定义这个属性,给它一个初始值
  //4. isActive状态用来保存li的active类是否添加和按钮的display状态
  const [isActive,setIsActive]=useState(false)

  // //鼠标移入时,active状态变为true
  // const mouseEnterHandle = () => {
  //   setIsActive(true)
  // }
  
  // //鼠标移出li的事件函数
  // const mouseLeaveHandle = () => {
  //   setIsActive(false);
  // }


  // 5.因为高亮以及删除的逻辑一样.我们可以使用柯里化来解决,让代码更高级.
  //5.1定义鼠标移入移出函数,接收的参数用来监听状态
  const mouseHandle =(bool)=>{
       //外层函数用来接收参数,返回的函数是真正的事件函数
    return ()=>{
      setIsActive(bool)
    }
  }
  //我们先給移入移出函数定义一个初始状态.,函数加括号调用了,我们得返回一个事件函数
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display:  isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
